<template>
	<div>
		<headerVue :HeadIndex="4"></headerVue>
		<div class="top">
			<div class="top_main">
				<div class="location">当前位置 ：<a href="/">首页</a> &gt; <a href="/news">新闻中心</a> &gt; <a
						href="javascript:void(0)">沉静柔和的办公室装修，非传统色彩解决方案</a></div>
				<div class="top_card">
					<div class="clearfix">
						<div class="left fl relative">
							<a href="" target="_blank">
								<div class="images">
									<img :src="img" alt="" />
								</div>
								<div class="bg"></div>
								<h2>办公室装修设计中，化繁为简的魔力！</h2>
								<div class="about">
									<p class="mb5">资讯 : 前沿设计</p>
									<p>TIME <strong class="cb3b3b3">/ 2024.01.09</strong></p>
								</div>
							</a>
						</div>
						<div class="right">
							<ul class="clearfix">
								<li>
									<a href="" target="_blank">
										<div class="images">
											<img :src="img" alt="" />
										</div>
										<div class="text">
											<h3>沉静柔和的办公室装修，非传统色彩解决方案</h3>
										</div>
										<div class="about">
											<p class="mb5">资讯 : 前沿设计</p>
											<p>TIME <strong class="cb3b3b3">/ 2024.01.07</strong></p>
										</div>
									</a>
								</li>
								<li>
									<a href="" target="_blank">
										<div class="images">
											<img :src="img" alt="" />
										</div>
										<div class="text">
											<h3>精心设计的办公空间，引人注目的弧形墙壁</h3>
										</div>
										<div class="about">
											<p class="mb5">资讯 : 前沿设计</p>
											<p>TIME <strong class="cb3b3b3">/ 2024.01.05</strong></p>
										</div>
									</a>
								</li>
								<li>
									<a href="" target="_blank">
										<div class="images">
											<img :src="img" alt="" />
										</div>
										<div class="text">
											<h3>精心设计的办公空间，引人注目的弧形墙壁</h3>
										</div>
										<div class="about">
											<p class="mb5">资讯 : 前沿设计</p>
											<p>TIME <strong class="cb3b3b3">/ 2024.01.05</strong></p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="news_list" style="">

			<div class="content">
				<div class="menu-bar">
					<div class="clearfix consultTypes">
						<a href="" class="fl active">最新</a>
						<a href="" class="fl"> 施工现场 </a>
						<a href="" class="fl"> 前沿设计 </a>
					</div>
				</div>
				<div class="articles">
					<ul>
						<NewsList />
						<NewsList />
						<NewsList />
					</ul>
				</div>
				<div class="page clearfix">
					<a href="javascript:void(0);" class="page_num current" page_num="1">1</a>
					<a href="javascript:void(0);" class="page_num" page_num="2">2</a>
					<a href="javascript:void(0);" class="page_num" page_num="3">3</a>
					<a href="javascript:void(0);" class="page_num" page_num="4">4</a>
					<a href="javascript:void(0);" class="page_num" page_num="5">5</a>
					<span>...</span>
					<a href="javascript:void(0);" class="page_num" page_num="10">10</a>
					<a href="javascript:" class="next icon"></a>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<footerVue></footerVue>
	</div>
</template>

<script setup>
	import img from "../../assets/imgs/home/banner.jpg";
	import headerVue from '../../components/header.vue';
	import footerVue from '../../components/footer.vue';
	import NewsList from "./NewsList.vue";
</script>

<style lang="less" scoped>
	.top {
		background-color: #000;

		.top_main {
			width: 1400px;
			margin: 0 auto;
			overflow: hidden;
			.location {
				color: #fff;
				margin: 18px 0;
				line-height: 30px;
			
			}
			
			.location a {
				font-size: 14px;
				color: #fff;
			}
			
			.location a:hover {
				text-decoration: underline;
			}
			
		}

		.top_card {
			padding-bottom: 70px;
			.left {
				width: 585px;
				height: 415px;
				text-align: center;
				position: relative;

				a {
					display: block;
					width: 100%;
					height: 100%;

					&::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 3px;
						overflow: hidden;
						-webkit-transition: all 0.4s ease;
						-moz-transition: all 0.4s ease;
						transition: all 0.4s ease;
						-moz-transform: scaleX(0);
						-webkit-transform: scaleX(0);
						transform: scaleX(0);
					}

					&:hover .images img {
						transform: scale(1.2);
					}

					&:hover .bg {
						opacity: 0;
					}

					&:hover .about p {
						color: #cccccc;
					}

					&:hover about p strong {
						color: #868686;
					}

					&:hover::after {
						transform: scaleX(1);
						background: #da1a45;
					}

					h2 {
						position: absolute;
						left: 0;
						bottom: 108px;
						padding: 0 75px;
						font-family: MicrosoftYaHei-Bold;
						font-size: 32px;
						line-height: 40px;
						letter-spacing: 1px;
						font-weight: bold;
						color: #ffffff;
					}

					.bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.5);
						transition: all 0.4s linear;
					}

					.images {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						overflow: hidden;

						img {
							display: block;
							width: 100%;
							height: 100%;
							-webkit-transition: all 0.4s ease;
							-moz-transition: all 0.4s ease;
							transition: all 0.4s ease;
						}
					}

					.about {
						position: absolute;
						left: 0;
						bottom: 30px;
						width: 100%;
						text-align: center;

						p {
							color: #fff;
							font-size: 12px;
							font-weight: bold;
						}
					}
				}
			}

			.right {
				margin-left: 585px;
				overflow: hidden;

				ul {
					li {
						float: left;
						width: 246px;
						height: 415px;
						margin-left: 25px;
						background-color: #fafafa;
						text-align: center;

						a {
							display: block;
							width: 100%;
							height: 100%;
							position: relative;

							&::after {
								content: "";
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 3px;
								overflow: hidden;
								transition: all 0.4s ease;
								transform: scaleX(0);
							}

							&:hover {
								color: #da1a45;
							}

							&:hover::after {
								transform: scaleX(1);
								background: #da1a45;
							}

							&:hover h3 {
								color: #da1a45;
							}

							.images {
								width: 100%;
								height: 150px;
								overflow: hidden;

								img {
									display: block;
									width: 100%;
									height: 100%;
									transition: all 0.4s ease;
								}
							}

							h3 {
								padding: 34px 26px 0;
								font-family: MicrosoftYaHei-Bold;
								font-weight: bold;
								font-size: 18px;
								line-height: 28px;
								color: #212121;
							}
						}
					}
				}
			}

			.about {
				position: absolute;
				left: 0;
				bottom: 30px;
				width: 100%;
				text-align: center;

				p {
					color: #000;
				}
			}
		}
	}

	.news_list {
		background: #fff;
		width: 1400px;
		margin: 0 auto;

		.content {
			background: #fff;

			.menu-bar {
				padding: 40px;
				background-color: #fafafa;

				.consultTypes {
					width: 1400px;
					margin: 0 auto;
				}

				a {
					font-family: MicrosoftYaHei-Bold;
					font-weight: bold;
					margin-right: 32px;

					&.active {
						color: #da1a45;
					}

					&:hover {
						color: #da1a45;
					}
				}
			}

			.articles {
				ul {
					display: flex;
					flex-direction: column;
					margin-bottom: 20px;
				}
			}

			.page {
				padding: 40px 0 60px;
				font-size: 16px;
				text-align: center;

				.current {
					background-color: #da1a45;
					color: #fff;
				}

				.prev,
				.next {
					width: 34px;
					height: 34px;
					margin-top: 0;
					position: static;
				}

				.next {
					margin-left: 25px;

					&:hover {
						background-color: transparent;
						background-position: -114px -184px;
					}

					// background-position: -114px -150px;
				}

				.icon {
					position: absolute;
					background: url("../../assets/imgs/icon.png") no-repeat;
					background-position-x: -114px;
					background-position-y: -150px;
				}

				a,
				span {
					display: inline-block;
					vertical-align: middle;
					width: 34px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					margin-top: 2px;
					margin-right: 5px;
					border-radius: 5px;
				}

				a:hover {
					background-color: #da1a45;
					color: #fff;
				}
			}
		}
	}

	.fl {
		display: inline;
		float: left;
	}

	.clearfix {
		zoom: 1;
	}

	.clearfix:after {
		display: block;
		content: "";
		clear: both;
	}

	img {
		max-width: 100%;
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.pr10 {
		padding-right: 10px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.pl10 {
		padding-left: 10px;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.cda1a45 {
		color: #da1a45;
	}

	.cb3b3b3 {
		color: #b3b3b3;
	}

	a {
		text-decoration: none;
		color: #333;
	}
</style>